<template>
  <el-dialog title="请选择表字段映射字典"
             :visible.sync="selectDialogVisible"
             width="80%" @close="closeDialog">
    <div style="padding-bottom: 50px;">
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button
              style="float:right"
              type="primary"
              @click="handleSearchList()"
              size="small">
            查询搜索
          </el-button>
          <el-button
              style="float:right;margin-right: 15px"
              @click="handleResetSearch()"
              size="small">
            重置
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="listQuery" label-width="auto" size="small">
            <el-form-item label="配置名称">
              <el-input clearable v-model="listQuery.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select clearable filterable v-model="listQuery.type" style="width:100%">
                <el-option label="单选" value="0"></el-option>
                <el-option label="多选" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="展示形式">
              <el-select clearable filterable v-model="listQuery.showAsTag" style="width:100%">
                <el-option label="文本" value="0"></el-option>
                <el-option label="tag" value="1"></el-option>
              </el-select>
            </el-form-item>

          </el-form>
        </div>
      </el-card>

      <div class="table-container">
        <el-table :data="selectList"
                  style="width: 100%;"
                  v-loading="selectListLoading" border>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-form label-position="left" inline class="demo-table-expand" label-suffix="："
                       style="background-color: #eeeeee4f">
                <el-form-item label="选项值: ">
                  <div style="text-align: center;width: 60%">
                    <div style="display: flex">
                      <div style="flex: 1">数据值</div>
                      <div style="flex: 1;margin-left: 10px">显示名称</div>
                      <div style="flex: 1;margin-left: 10px" v-if="scope.row.showAsTag == '1'">
                        tag颜色
                      </div>
                      <div style="flex: 1;margin-left: 10px" v-if="scope.row.showAsTag == '1'">
                        颜色预览
                      </div>
                    </div>
                    <div style="display: flex"
                         v-for="item in JSON.parse(scope.row.showSelectOption?scope.row.showSelectOption:{})">
                      <el-input disabled v-model="item.value" size="mini" style="flex: 1"></el-input>
                      <el-input disabled v-model="item.label" size="mini" style="flex: 1;margin-left: 10px"></el-input>

                      <el-select disabled v-model="item.color" size="mini" style="flex: 1;margin-left: 10px"
                                 v-if="scope.row.showAsTag == '1'">
                        <el-option label="蓝色" value="primary"></el-option>
                        <el-option label="红色" value="danger"></el-option>
                        <el-option label="绿色" value="success"></el-option>
                        <el-option label="橙色" value="warning"></el-option>
                        <el-option label="灰色" value="info"></el-option>
                      </el-select>

                      <el-tag :type="item.color" style="flex: 1;margin-left: 10px"
                              v-if="scope.row.showAsTag == '1'">{{ item.label }}
                      </el-tag>
                    </div>
                  </div>
                </el-form-item>

              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="配置名称" align="center" prop="name" show-overflow-tooltip/>
          <el-table-column label="类型" align="center" prop="type">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type == '0'" type="success">单选</el-tag>
              <el-tag v-if="scope.row.type == '1'" type="primary">多选</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="展示形式" align="center" prop="showAsTag">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.showAsTag == '0'" type="warning">文本</el-tag>
              <el-tag v-if="scope.row.showAsTag == '1'" type="primary">tag</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="详细描述" align="center" prop="desc" show-overflow-tooltip/>

          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleSelect(scope.row)">选择</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery.current"
            :page-size="listQuery.pageSize"
            :page-sizes="[5,10,15]"
            :total="total">
        </el-pagination>
      </div>

    </div>
  </el-dialog>
</template>

<script>
import {projectTableFiledConfigPrePostRequire} from '@/api/projectTableFiledConfigPre';

const defaultListQuery = {
  current: 1,
  pageSize: 10,
  name: undefined,
  type: undefined,
  showAsTag: undefined,
}
export default {
  name: "projectTableFiledConfigPreSelect",
  props: {
    visible: {
      default: false
    }
  },
  data() {
    return {
      selectList: [],
      total: null,
      selectListLoading: false,
      selectDialogVisible: false,
      listQuery: this.$deepClone(defaultListQuery),
    }
  },
  watch: {
    visible(val) {
      this.selectDialogVisible = val
      if (val) {
        this.getList()
      }
    }
  },
  methods: {

    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    getList() {
      this.selectListLoading = true
      projectTableFiledConfigPrePostRequire('listPage', this.listQuery).then(response => {
        this.selectListLoading = false
        this.selectList = response.data.records
        this.total = response.data.total
      })
    },
    handleResetSearch() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    closeDialog() {
      this.selectDialogVisible = false
      this.$emit('close')
    },
    handleSelect(row) {
      this.$emit("onSelect", row)
      this.closeDialog()
    }
  }
}
</script>
<style>
.demo-table-expand label {
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 10px;
  width: 100%;
}
</style>
